<!-- 交易订单查询 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="用户ID">
                            <a-input v-model="userId" allow-clear placeholder="请输入用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="通道类型">
                            <a-select v-model="channelTag" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in channelList" :key="i" :value="item.channelTag">{{item.channelName}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单类型">
                            <a-select v-model="orderType" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in orderTypeList" :key="i" :value="item.orderType">{{item.description}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="日期">
                            <a-range-picker v-model="dateValue" @change="dateChange"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="16" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size, showTotal: (total) => `交易笔数：${total}条`}" size="small" :scroll="{ x: 1800, }">
            <div slot="amount" slot-scope="amount">
                <span>{{amount}}</span>
            </div>
            <div slot="realAmount" slot-scope="realAmount">
                <span>{{realAmount}}</span>
            </div>
            <div slot="rate" slot-scope="rate">
                <span>{{(rate * 100).toFixed(2)}}%</span>
            </div>
            <div slot="serviceCharge" slot-scope="serviceCharge">
                <span>{{serviceCharge}}</span>
            </div>
            <div slot="accountType" slot-scope="accountType">
                <span>{{accountType }}</span>
            </div>
            <div slot="orderType" slot-scope="orderType">
                <div v-for="type in orderTypeList" :key="type.orderType">
                    <span v-if="type.orderType == orderType">{{type.description}}</span>
                </div>
            </div>
            <div slot="orderStatus" slot-scope="orderStatus">
                <div v-for="status in orderStatusList" :key="status.id">
                    <span :class="`status${orderStatus}`" v-if="status.id == orderStatus">{{status.name}}</span>
                </div>
            </div>
            <!-- <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-popconfirm
                        v-if="record.orderStatus == 1 || record.orderStatus == 3"
                        title="是否审核通过当前充值订单?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="operation(record,4)"
                    >
                        <a-button type="link">通过</a-button>
                    </a-popconfirm>
                    <a-button v-if="record.orderStatus == 1" type="link" @click="operation(record,3)">拒绝</a-button>
                </div>
            </template> -->
        </a-table>
    </div>
</template>

<script>
import { columns } from './table';
import { queryBrand }  from '@/api/brand';
import { queryTransactionType , queryTransactionOrder } from '@/api/order';
import { queryBrandChannelConfig } from '@/api/product';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            dataList: [],
            total: 0,
            isload: false,
            page: 1,
            size: 10,
            phone: '',
            userId: '',
            orderCode: '',
            channelTag: undefined,
            channelList: [],
            orderType: undefined,
            orderTypeList: [],
            orderStatus: '2',
            orderStatusList: [
                { id: 0, name: '待执行' },
                { id: 1, name: '已成功' },
                { id: 2, name: '已失败' },
                { id: 3, name: '待确认' },
            ],
            columns,
            dateValue: [],
            gtCreateTime: '', // 大于等于的日期
            ltCreateTime: '', // 小于的日期
        };
    },
    created(){
        this.getType()
        this.getChannel()
        this.getData()
    },
    methods: {
        // 查询所有通道
        getChannel(){
            let _this = this
            const params = {
                'size':99,
                'page':0,
            }
            queryBrandChannelConfig(params)
            .then(res=>{
                if(res.success){
                    _this.channelList = res.data.content
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询订单类型
        getType(){
            let _this = this
            const params = {

            }
            queryTransactionType(params)
            .then(res=>{
                if(res.success){
                    _this.orderTypeList = res.data
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询交易订单
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'userId':_this.userId,
                'orderCode':_this.orderCode,
                'channelTag':_this.channelTag,
                'orderType':_this.orderType,
                'orderStatus':_this.orderStatus,
                'gtCreateTime': _this.gtCreateTime,
                'ltCreateTime': _this.ltCreateTime,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryTransactionOrder(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        dateChange(date,dateString){
            this.gtCreateTime = dateString[0];
            this.ltCreateTime = dateString[1];
            this.getData();
        }
    }
}

</script>
<style scoped>
.status0{
    color: #faad14
}
.status1{
    color: #52c41a
}
.status2{
    color: #f5222d
}
.status3{
    color: #faad14
}
</style>